<template>
  <div class="manager">
    <el-button type="primary" @click="showDialog = true">上传理财报文</el-button>
    <el-button type="success" @click="showValidateDialog = true">校验报文</el-button>
    <el-dialog title="校验" :visible.sync="showValidateDialog" width="30%">
      <el-date-picker
        v-model="validateMonth"
        value-format="yyyy-MM"
        type="month"
        placeholder="选择校验月份"
      ></el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showValidateDialog = false">取 消</el-button>
        <el-button type="primary" @click="startValidate">确 定</el-button>
      </span>
    </el-dialog>

    <upload-dialog :showDialog="showDialog" @closeDialog="closeDialog"></upload-dialog>

    <el-table :data="productInfoList">
      <el-table-column fixed prop="code" label="产品代码" width="150"></el-table-column>
      <el-table-column fixed prop="name" label="产品名称" width="120"></el-table-column>
      <el-table-column fixed label="操作" width="450">
        <template slot-scope="scope">
          <el-button size="mini" type="primary">产品详情</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">起始募集信息</el-button>
          <el-button size="mini" type="success">募集信息</el-button>
          <el-button size="mini" type="warning">资产池信息</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="orgName" label="发起机构" width="120"></el-table-column>
      <el-table-column prop="runMethod" label="运行方式" width="120"></el-table-column>
      <el-table-column prop="productType" label="产品类型" width="120"></el-table-column>
      <el-table-column prop="highestRateOfReturn" label="预计最高收益率" width="120"></el-table-column>
      <el-table-column prop="lowestRateOfReturn" label="预计最低收益率" width="120"></el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalPage"
      :current-page="pageNum"
      :page-size="pageSize"
      @current-change="changePageNum"
      @prev-click="changePageNum"
      @next-click="changePageNum"
    ></el-pagination>
  </div>
</template>
<script>
import {
  Button,
  Table,
  TableColumn,
  Pagination,
  Dialog,
  DatePicker
} from "element-ui";
import UploadDialog from "./components/UploadDialog";
import { getInfo, validateInfo } from "@/api/bank-financing.js";
export default {
  name: "bank-finacing-manage",
  components: {
    [Button.name]: Button,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination,
    [Dialog.name]: Dialog,
    [DatePicker.name]: DatePicker,
    UploadDialog
  },
  mounted() {
    this.refreshTable();
  },
  data() {
    return {
      showDialog: false,
      pageNum: 1,
      pageSize: 20,
      totalPage: 0,
      productInfoList: [],
      showValidateDialog: false,
      validateMonth: null
    };
  },
  methods: {
    closeDialog() {
      this.showDialog = false;
    },
    refreshTable() {
      getInfo({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
        .then(res => {
          this.productInfoList = res.list;
          this.totalPage = res.total;
        })
        .catch(errMsg => {
          this.$alert(errMsg.msg);
        });
    },
    changePageNum(pageNum) {
      this.pageNum = pageNum;
      this.refreshTable();
    },
    startValidate() {
      let loading = this.$loading({
        lock: true,
        text: "努力校验中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      validateInfo(this.validateMonth)
        .then(res => {
          loading.close();
          let data = res.data;
          console.log(res);
          if (data.type === "application/json") {
            let data = res.data;
            new Blob([data])
              .text()
              .then(text => {
                let json = JSON.parse(text);
                console.log(json.msg);
                this.$alert(json.msg);
                return;
              })
              .catch(errMsg => {
                return;
              });
          }
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          let filename = res.headers["content-disposition"].split(
            "fileName="
          )[1];
          link.setAttribute("download", filename);

          document.body.appendChild(link);
          link.click();
        })
        .catch(errMsg => {});
    }
  }
};
</script>
<style lang="stylus" scoped>
.manager {
  padding-left: 20px;
  padding-top: 20px;
}
</style>
